import React, { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import '../css/topup.scss'
import {payment} from '../../../request/instance'
// 充值页面
let maining = [50, 100, 200, 300, 500]
export default function TopUp() {
  const navigate = useNavigate()
  const { state } = useLocation() // 当前登录的id
  const [price, setPrice] = useState()
  const back = () => {
    navigate(-1)
  }
  const orderPay = async () => {
    if (!price) {
      alert('请选择充值金额')
      return
    }
    //进行调用支付宝接口
    let data = {
      order_id:Date.now(),
      name: '充值',
      price: price,
      user:state
    }
    let res = await payment(data)
    if(res.data.code == 200){
      window.location.href = res.data.data
    }
  }
  return (
    <div className='topup'>
      <NavBar onBack={back}>余额充值</NavBar>
      <div className="waytopup">
        <div className="way">支付方式</div>
        <div className="check">
          <input type="radio" id='wechat' defaultChecked />
          <label htmlFor="wechat">支付宝</label>
        </div>
      </div>
      <div className="maining">
        <div className="money">
          <span>充值金额</span>
          <div className="box">
            {
              maining.map((item, index) => {
                return <div className={`span ${price === item ? "active" : ""}`} onClick={() => { setPrice(item) }} key={index}>{item}元</div>
              })
            }
            <div className="span">其他</div>
          </div>
        </div>
      </div>
      <button className="pay" onClick={orderPay}>提交订单</button>
    </div>
  )
}


